<template>
    <el-card>
        <el-table :data="tableData" border style="width: 100%" size="small">
            <el-table-column prop="fullName" label="姓名" width="180">
                <template #default="scope">
                    <div v-if="editingMemberId === scope.row.userNumber">
                        <el-input v-model="scope.row.fullName" size="small"></el-input>
                    </div>
                    <div v-else>
                        {{ scope.row.fullName }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="birthDate" label="生日" width="240">
                <template #default="scope">
                    <div v-if="editingMemberId === scope.row.userNumber">
                        <el-date-picker v-model="scope.row.birthDate" type="date" size="small"></el-date-picker>
                    </div>
                    <div v-else>
                        {{ scope.row.birthDate }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="birthPlace" label="籍贯" width="180">
                <template #default="scope">
                    <div v-if="editingMemberId === scope.row.userNumber">
                        <el-input v-model="scope.row.birthPlace" size="small"></el-input>
                    </div>
                    <div v-else>
                        {{ scope.row.birthPlace }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="awardsList" label="奖项">
                <template #default="scope">
                    <ul>
                        <li v-for="award in scope.row.awardsList" :key="award.awardId">
                            {{ award.awardName }} - {{ award.description }} - ({{ award.dateAwarded }})
                        </li>
                    </ul>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="180">
                <template #default="scope">
                    <el-button v-if="editingMemberId === scope.row.userNumber" @click="saveMember(scope.row)"
                        type="primary" size="small">保存</el-button>
                    <el-button v-else @click="editMember(scope.row)" type="primary" size="small">编辑</el-button>
                    <el-button @click="deleteMember(scope.row)" type="danger" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </el-card>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import axios from '@/services/axios.js';
import { useMemberStore } from '@/stores/memberStore.js';

const memberStore = useMemberStore();
const editingMemberId = ref(null);

const tableData = computed(() => memberStore.members);

function getUserInfo () {
    axios.get('/information/all').then(response => {
        if (response.data.code === 1) {
            memberStore.setMembers(response.data.data);
            console.log('成员信息已更新:', memberStore.members);
        } else {
            console.error('获取成员信息失败:', response.data.msg);
        }
    }).catch(error => {
        console.error('请求错误:', error);
    });
}

function editMember (member) {
    editingMemberId.value = member.userNumber;
}

function saveMember (member) {
    // 保存成员的逻辑
    console.log('保存成员:', member);
    editingMemberId.value = null;
}

function deleteMember (member) {
    // 删除成员的逻辑
    console.log('删除成员:', member);
}

// 在组件挂载时调用函数以获取用户信息
onMounted(() => {
    getUserInfo();
});
</script>

<style scoped>
ul {
    list-style-type: none;
    padding-left: 0;
}
</style>